<script setup lang="ts">
import { fetchScoreBoardDataApi } from '@/api/MicroScene/MicroSceneApi';
import type { ScoreBoardItem } from '@/types/micro-scene';
import { defineProps, onMounted, ref, watch } from 'vue';
import { Empty } from 'ant-design-vue';

const props = defineProps<{
  areaId: string;
}>();

const scoreBoardData = ref<ScoreBoardItem[]>([]);

// 刷新数据的函数
const refreshData = async () => {
  try {
    const res = await fetchScoreBoardDataApi({ areaId: Number(props.areaId), num: 8 });
    scoreBoardData.value = res || [];
  }
  catch (error) {
    console.error('获取积分榜数据失败:', error);
    scoreBoardData.value = [];
  }
};

// 监听 props.areaId 的变化
watch(
  () => props.areaId,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      // 在获取新数据之前先清空旧数据
      scoreBoardData.value = [];
      refreshData();
    }
  },
  { immediate: true, deep: true },
);

onMounted(async () => {
  await refreshData();
});
</script>

<template>
  <a-layout style="display: flex; flex-direction: column; border-radius: 0.5rem; background-color: transparent;">
    <span style="font-size: 1.5rem; font-weight: bold; color: black; position: relative; width: fit-content;">
      积分榜
      <img
        src="@/assets/title_star.svg"
        alt="积分榜"
        style="width: 1.5rem; height: 1.5rem; position: absolute; right: -2rem;"
      >
    </span>

    <div style="display: flex; flex-direction: column; background-color: white; border-radius: 0.5rem; margin-top: 0.5rem;">
      <template v-if="scoreBoardData.length > 0">
        <div style="padding: 0.5rem;">
          <div style="display: flex; flex-direction: column; gap: 0.5rem;">
            <div v-for="(item, index) in scoreBoardData" :key="item.user.userId">
              <div style="display: flex; flex-direction: row; align-items: center;">
                <span style="font-size: 1rem; font-weight: bold; color: #666; width: 1.5rem;">{{ index + 1 }}</span>
                <a-avatar
                  :src="item.user.userImage || ''"
                  :alt="item.user.realname || '未知用户'"
                  style="width: 1.5rem; height: 1.5rem; margin-right: 0.5rem;"
                  shape="circle"
                />
                <div style="display: flex; flex-direction: column; min-width: 0; flex: 1;">
                  <span style="font-size: 0.8rem; color: #999;">{{ item.user.realname || '未知用户' }}</span>
                  <span
                    style="
                      font-size: 0.8rem;
                      color: #999;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                  >{{ item.user.userCollege || '未知学院' }}</span>
                </div>

                <span style="font-size: 0.8rem; color: #ff4d4f; margin-left: 1rem; font-weight: bold; white-space: nowrap;">
                  {{ item.score }} 分
                </span>
              </div>

              <a-divider
                v-if="index !== scoreBoardData.length - 1"
                style="margin: 0rem; margin-top: 0.2rem; border-color: grey; border-width: 1px;"
              />
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <a-empty
          :image="Empty.PRESENTED_IMAGE_SIMPLE"
          description="当前专区暂无积分数据"
        />
      </template>
    </div>
  </a-layout>
</template>

<style scoped lang="scss">

</style>
